<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
    <!-- <link rel="stylesheet" href="http://web.hcoriental.com/site.css"> -->
    <script src="https://cdn.jsdelivr.net/npm/clipboard@1/dist/clipboard.min.js"></script>
    <script src="http://activity.hcoriental.com/jquery-3.3.1.min.js"></script>
    <script>
        window.onload = function () {
            // 擷取url參數值
            function GetRequest() {
                var url = location.search; //获取url中"?"符后的字串
                var theRequest = new Object();
                if (url.indexOf("?") != -1) {
                    var str = url.substr(1);
                    strs = str.split("&");
                    for (var i = 0; i < strs.length; i++) {
                        theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
                    }
                }
                return theRequest;
            }

            //回首页
            $('#backToHome').click(function () {
                if (window.cp && window.cp.excuteCommand) {
                    window.cp.excuteCommand("cp://open/home?index=0");
                } else if (window.G && window.G.wkwebview) {
                    window.webkit.messageHandlers.cp.postMessage({ "name": "executeCommand", "command": 'cp://open/home?index=0' });

                } else {
                    console.log("not support cp");
                }
            })

            //连结至客服ds
            $('.goToKefu').click(function () {
                if (window.cp && window.cp.excuteCommand) {
                    window.cp.excuteCommand("cp://open/kefu");
                } else if (window.G && window.G.wkwebview) {
                    window.webkit.messageHandlers.cp.postMessage({ "name": "executeCommand", "command": 'cp://open/kefu' });

                } else {
                    console.log("not support cp");
                }
            })


            var request = new Object(); //擷取url參數類別
            var page = 0; //頁面變數
            var textObj = {
                listId: '银行卡号',
                listName: '姓名',
                bankId: '请输入您转账的银行卡号',
                bankName: '请填写存款人姓名',
                vbankId: '请输入正确的银行卡号',
                vbankName: '请输入正确的真实姓名'
            }//顯示訊息變數
            var submitTouch = true
            request = GetRequest();
            page = request["P"]
            // 頁面切換
            switch (page) {
                case "2":
                    $("#listNotShow").hide();
                    $("#page1").hide();
                    $("#page2").show();
                    $("#page3").hide();
                    break;
                case "3":
                    $("#page1").hide();
                    $("#page2").hide();
                    $("#page3").show();
                    break;

                default:
                    $("#page1").show();
                    $("#page2").hide();
                    $("#page3").hide();
                    break;
            }

            //一鍵複製觸發方法
            $("#copy").click(
                function oneTouchCopy() {
                    var clipboard = new Clipboard('.copybtn', {
                        container: document.getElementById('bankCard')
                    });
                    clipboard.on('success', function (e) {
                        console.log('複製成功');
                        e.clearSelection();
                    });

                    clipboard.on('error', function (e) {
                        console.log('複製失敗')
                        console.error('Action:', e.action);
                        console.error('Trigger:', e.trigger);
                    });
                });

            $("#copyOwner").click(
                function oneTouchCopy() {
                    var clipboardOwner = new Clipboard('.copybtn', {
                        container: document.getElementById('bankOwner')
                    });
                    clipboardOwner.on('success', function (e) {
                        console.log('複製成功')
                        e.clearSelection();
                    });

                    clipboardOwner.on('error', function (e) {
                        console.log('複製失敗')
                        console.error('Action:', e.action);
                        console.error('Trigger:', e.trigger);
                    });
                });


            // 轉換帳戶資訊
            $("#bankStyle").change(function () {
                var transfer = $("#bankStyle").val();
                var listId = document.querySelector('#listId');
                var listName = document.querySelector('#listName');
                var bankId = document.querySelector('#bankId');
                var bankName = document.querySelector('#bankName');
                $('#bankId').val('')
                switch (transfer) {
                    case "bankcard":
                        $("#listNotShow").hide();
                        $("#applyBank").show();
                        textObj = {
                            listId: '银行卡号',
                            listName: '姓名',
                            bankId: '请输入您转账的银行卡号',
                            bankName: '请填写存款人姓名',
                            vbankId: '请输入正确的银行卡号',
                            vbankName: '请输入正确的真实姓名'
                        }
                        break;
                    case "alipay":
                        $("#listNotShow").show();
                        $("#applyBank").hide();
                        textObj = {
                            listId: '支付宝账号',
                            listName: '姓名',
                            bankId: '请输入您转账的支付宝账号',
                            bankName: '请填写存款人姓名',
                            vbankId: '请输入正确的支付宝账号',
                            vbankName: '请输入正确的真实姓名'
                        }
                        break;
                    case "wechat":
                        $("#listNotShow").show();
                        $("#applyBank").hide();
                        textObj = {
                            listId: '微信账号',
                            listName: '姓名',
                            bankId: '请输入您转账的微信账号',
                            bankName: '请填写存款人姓名',
                            vbankId: '请输入正确的微信账号',
                            vbankName: '请输入正确的真实姓名'
                        }
                        break;
                    case "others":
                        $("#listNotShow").hide();
                        $("#applyBank").hide();
                        textObj = {
                            listId: '转账账号',
                            listName: '姓名',
                            bankId: '请输入您的账号信息',
                            bankName: '请填写存款人姓名',
                            vbankId: '请输入正确的转账账号',
                            vbankName: '请输入正确的真实姓名'
                        }
                        break;
                }
                listId.textContent = textObj.listId;
                listName.textContent = textObj.listName;
                bankId.setAttribute("placeholder", textObj.bankId);
                bankName.setAttribute("placeholder", textObj.bankName);
            });

            // 確認提交按鈕事件
            $("#checkSubmit").click(function () {
                // 表單驗證
                var bankStyle = $("#bankStyle").val().trim()
                var bank = $("#bank").val().trim()
                var verificationMsg = ""
                var amount = $("#amount").val().trim()
                var bankId = $("#bankId").val().trim()
                var bankName = $("#bankName").val().trim()

                // 表單驗證
                if (bankStyle === 'bankcard') {
                    if (bank == null || bank == undefined || bank == 1) {
                        verificationMsg += "请选择您的开户银行" + "\n"
                        alert(verificationMsg)
                        return
                    }
                    //                if ((bankId.length < 14 || bankId.length > 23) && bankId != "") {
                    //                    verificationMsg += "请输入正确的银行卡号" + "\n"
                    //                    alert(verificationMsg)
                    //                    return
                    //                }
                }
                if (amount <= 0) {
                    alert("请输入正确到账金额\n")
                    return
                }
                //            if (bankId == null || bankId == undefined || bankId == "") {
                //                alert(textObj.vbankId + "\n")
                //                return
                //            }
                if (bankName == null || bankName == undefined || bankName == "") {
                    alert(textObj.vbankName)
                    return
                }
                if (verificationMsg != "") {
                    //表單驗證錯誤訊息顯示
                    alert(verificationMsg)
                }

                if (bankStyle !== 'bankcard') {
                    bank = '';
                }
                if (submitTouch) {
                    submitTouch = false
                    $.ajax({
                        url: '{{charge_fill_url}}',
                        type: 'post',
                        data: {
                            pay_type: bankStyle,
                            amount: amount,
                            pay_account_bank: bank,
                            pay_account_num: bankId,
                            pay_account_username: bankName,
                            random_num: '{{random_num}}',
                            order_id: '{{order_id}}',
                            out_trade_no: '{{out_trade_no}}',
                            sign: '{{sign}}'
                        },
                        error: function (xhr) {
                            $('.bg').css({ 'display': 'block' });
                            $('.alter_content').css({ 'display': 'block' });
                            // alert('请求发送失败')
                            submitTouch = true
                        },
                        success: function (response) {
                            // alert('请求发送成功');
                            submitTouch = true
                            window.location.replace(location.origin + location.pathname + "?P=3");
                        }
                    });
                }
            });
            //關閉彈出訊息背景
            $('.bg').click(function () {
                $('.bg').css({ 'display': 'none' });
                $('.alter_content').css({ 'display': 'none' });
            });
            $('.alter_content').click(function () {
                $('.bg').css({ 'display': 'none' });
                $('.alter_content').css({ 'display': 'none' });
            });
        }

    </script>
    <style>
        /* html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {	display: block;}body {	line-height: 1;}ol, ul {	list-style: none;}blockquote, q {	quotes: none;}blockquote:before, blockquote:after,q:before, q:after {	content: '';	content: none;}table {	border-collapse: collapse;	border-spacing: 0;} */

        body {
            margin: 0;
        }

        h1 {
            display: inline-block;
            width: 88%;
            font-size: 1.5rem;
            text-align: center;
            color: #fff;
            vertical-align: middle;
            font-weight: lighter;
            margin: 0.5rem auto;
        }

        .header {
            top: 0;
            width: 100%;
            background: #FB5926;
        }

        .header a {
            text-decoration: blink;
        }

        .header input[type="button"] {
            background-image: url('http://p.hcoriental.com/back.png');
            background-size: 1.5rem 1.5rem;
            background-color: #FB5A27;
            background-repeat: no-repeat;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            width: 6%;
            height: 1.5rem;
            border: none;
            vertical-align: middle;
        }

        .pathTitle {
            background-color: #EEEDEE;
            text-align: center;
            padding: 1rem 0;
        }

        .pathTitle p:nth-child(1) {
            color: #FB5926;
            text-align: right;
            width: 39%;
        }

        .pathTitle p:nth-child(2) {
            color: #989898;
            width: 5%;
            text-align: center;
        }

        .pathTitle p:nth-child(3) {
            width: 38%;
        }

        #page2 .pathTitle p:nth-child(3) {
            color: #FB5926;
        }

        #page2 .pathTitle div {
            margin-top: 1rem;
            color: #FB5926;
        }

        #page2 .pathTitle div span {
            color: #656565;
            font-size: 14px;
        }

        .pathTitle p {
            padding: 0.7rem;
            display: inline;
        }

        .bank_text {
            margin-top: 1rem;
            margin-left: 1rem;
            margin-right: 1rem;
        }

        .transferAccount {
            border: 1px solid #a1a1a1;
            /* padding: 0.5rem 0 0.5rem 1rem; */
            border-color: #CCCCCC;
            border-style: solid;
        }

        .transferAccount img:nth-child(1) {
            width: 10rem;
            margin-left: 0.8rem;
            margin-top: 0.3rem;
        }

        .bank-frame {
            background-color: #FEFEF7;
            border-top: 1px solid #CCCCCC;
            padding: 1rem 0;
        }

        .bank-frame div:nth-child(1) {
            margin-bottom: 1rem;
        }

        .bank-frame p {
            display: inline;
        }

        .bank-frame div p:nth-child(1) {
            margin-left: 1rem;
            color: #989898;
        }

        .bank-frame div p:nth-child(2) {
            color: #656565;
        }

        .bank-frame div p:nth-child(3) {
            color: #FB5926;
            float: right;
            margin: 0 1rem 0 0;
        }

        .recommend_text {
            margin-top: 2rem;
            margin-bottom: 2rem;
            color: #FB805B;
        }

        .recommend_text img {
            width: 1.5rem;
            display: inline-block;
            vertical-align: middle;
            margin-bottom: 10px
        }

        .recommend_text span {
            display: inline-block;
            vertical-align: middle;
            margin-top:-0.5rem;
        }

        .suggestionMessage {
            background-color: #F5F4F5;
            padding-top: 1rem;
            padding-bottom: 14rem;
        }

        .suggestionMessage div {
            color: #FB5926;
            margin-left: 1rem;
        }

        .suggestionMessage div span {
            color: #656565;
            margin-left: 0.3rem;
            font-size: 14px;
        }

        .nextBtn {
            background-color: #FB5926;
            color: #fff;
            padding: 0.5rem 2rem;
            width: 75%;
            border-radius: 0.3rem;
            display: block;
            text-align: center;
            font-size: 1.2rem;
            text-decoration: none;
            margin-left: auto;
            margin-right: auto;
            margin-top: 2rem;
        }

        .list {
            background: #fff;
            color: #000;
            padding: 0.4rem 1rem;
            border-bottom: solid 1px #F5F4F5;
            border-radius: 0.2rem;
            font-weight: 200;
            font-size: 1.1rem;
        }

        .list h4 {
            display: inline-block;
            width: 25%;
            margin: 0;
            padding: 0.5rem 0.5rem 0.5rem 0;
            font-size: 1rem;
        }

        .list .idname {
            display: inline-block;
            margin: 0;
            color: #989898;
        }

        .list select {
            font-weight: 200;
            font-size: 1rem;
            width: 70%;
            padding: 0.5rem 1.5rem 0.5rem 0.5rem;
            background-image: url('http://p.hcoriental.com/arrowRight.png');
            background-repeat: no-repeat;
            background-position: right;
            border: none;
            background-color: #fff;
            background-size: 1rem 1rem;
            -webkit-appearance: none;
            -moz-appearance: none;
        }

        .list input {
            font-weight: 200;
            font-size: 1rem;
            display: inline-block;
            width: 58%;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            -webkit-border-radius: 5px;
            border-radius: 5px;
            border: none;
            padding: 0.5rem;
        }

        .list p {
            float: right;
            color: #FB5A29;
            margin-top: 0.4rem;
        }

        #amount {
            color: #FB5A29;
        }

        .show_end {
            text-align: center;
            margin-top: 2rem;
        }

        .succeed {
            width: 25%;
            margin: 2rem auto 1.5rem;
        }

        .bg {
            display: none;
            position: fixed;
            width: 100%;
            height: 100%;
            background: #000;
            z-index: 2;
            top: 0;
            left: 0;
            opacity: 0.7;
        }

        .alter_content {
            display: none;
            width: 69%;
            height: 10%;
            position: fixed;
            top: 50%;
            margin-top: -4rem;
            background: #fff;
            z-index: 3;
            left: 15%;
            border-radius: 10px;
            text-align: center;
            line-height: 3.7rem;
            font-size: 1rem;
        }
    </style>
</head>

<body>
    <div id="page1">
        <div class="header">
            <a href="cp://open/charge?chooseIndex=0">
                <input type="button" class="goToRecharge">
            </a>
            <h1>秒速充值</h1>
        </div>
        <div class="content">
            <div class='pathTitle'>
                <p>① 选择存款帐户</p>
                <p>></p>
                <p>② 提交订单</p>
            </div>
            <div class='bank_text'>
                <div class='transferAccount'>
                    <img src='{{bankcard_img}}' alt="">
                    <!-- <img src='../../../img/bank-zhaoshang.png' alt=""> -->
                    <div class='bank-frame'>
                        <div>
                            <p>帐&nbsp;&nbsp;&nbsp;号：</p>
                            <p id="bankCard">{{bankcard.account_number}}</p>
                            <!-- <p id="bankCard">9873987623488898</p> -->
                            <p id="copy" class="copybtn" href="javascript:void(0)" data-clipboard-target="#bankCard">一键复制</p>
                        </div>
                        <div>
                            <p>开户人：</p>
                            <p id="bankOwner">{{bankcard.account_holder}}</p>
                            <!-- <p id="bankOwner">張三豐</p> -->
                            <p id="copyOwner" class="copybtn" href="javascript:void(0)" data-clipboard-target="#bankOwner">一键复制</p>
                        </div>
                    </div>
                </div>
                <div class="recommend_text">
                    <!-- <img src="http://p.hcoriental.com/ico-warn.png">
                    <span>提交订单前，请先进行转账操作</span>
                    <span>单笔最低转账金额为50元</span> -->
                    <img src="http://p.hcoriental.com/ico-warn.png">
                    <span>提交订单前，请先进行转账操作</span>
                    <br/>
                    <img src="http://p.hcoriental.com/ico-warn.png">
                    <span>单笔最低转账金额为50元</span>
                </div>
            </div>
            <div class='suggestionMessage'>
                <div>*
                    <span>推荐：线下转账100元及以上享2%充值返利</span>
                </div>
                <div>*
                        <span>可使用支付宝、微信、网银等方式进行转账</span>
                </div>
                <a href="?P=2" class="nextBtn">提交订单</a>
            </div>
        </div>
    </div>
    <div id="page2">
        <div class="header">
            <input type="button" onclick="history.back()">
            <h1>秒速充值</h1>
        </div>
        <div class="content">
            <div class='pathTitle'>
                <p>① 选择存款帐户</p>
                <p>></p>
                <p>② 提交订单</p>
                <div>*
                    <span>为便于核对您的存款信息，请填写以下相关内容</span>
                </div>
            </div>
            <div class="list">
                <h4>我的ID</h4>
                <span class="idname">{{user_id}}</span>
                <!-- <span class="idname">567543</span> -->
            </div>
            <div class="list">
                <h4 id="listName">姓名</h4>
                <input id="bankName" type="text" class="put" maxlength="20" placeholder="请填写存款人姓名">
            </div>
            <div class="list">
                <h4>方式</h4>
                <select id="bankStyle" value='bankcard'>
                    <option value="bankcard">银行卡转账</option>
                    <option value="alipay">支付宝</option>
                    <option value="wechat">微信</option>
                    <option value="others">其他方式转账</option>
                </select>
            </div>
            <div class="list" id="applyBank">
                <h4>银行</h4>
                <select id="bank">
                    <option value="1">请选择您的开户银行</option>
                    <option value="工商银行">工商银行</option>
                    <option value="建设银行">建设银行</option>
                    <option value="中国银行">中国银行</option>
                    <option value="农业银行">农业银行</option>
                    <option value="交通银行">交通银行</option>
                    <option value="招商银行">招商银行</option>
                    <option value="中信银行">中信银行</option>
                    <option value="光大银行">光大银行</option>
                    <option value="华夏银行">华夏银行</option>
                    <option value="浦发银行">浦发银行</option>
                    <option value="兴业银行">兴业银行</option>
                    <option value="民生银行">民生银行</option>
                    <option value="平安银行">平安银行</option>
                    <option value="广发银行">广发银行</option>
                    <option value="其它银行">其它银行</option>
                </select>
            </div>
            <div class="list" id="listNotShow">
                <h4 id="listId">银行卡号</h4>
                <input id="bankId" type="text" class="put" maxlength="24" placeholder="请输入您转账的银行卡号">
            </div>
            <div class="list">
                <h4>金额</h4>
                <input id="amount" type="number" class="put" maxlength="12" placeholder="请输入实际到帐金额" />
                <p>元</p>
            </div>
            <div class='suggestionMessage'>
                <a class="nextBtn" id="checkSubmit">确认提交</a>
            </div>
        </div>
    </div>
    <div id="page3">
        <div class="header">
            <a href="cp://open/charge?chooseIndex=0">
                <input type="button" class="goToRecharge">
            </a>
            <h1>提交自助充值申请</h1>
        </div>
        <div class="content">
            <div class="show_end">
                <img class="succeed" src="http://p.hcoriental.com/succeed.png" alt="自助充值成功">
                <h3>自助充值申请提交成功！</h3>
                <p>客服人员会在5分钟以内处理，
                    <br/> 请留意站内消息通知。
                </p>
            </div>
            <a id="backToHome" class="nextBtn" href="cp://open/home?index=0">返 回</a>
        </div>
    </div>
    <div class="bg"></div>
    <div class="alter_content">提交失败，请重新操作。</div>
</body>

</html>
